<template>
	<div class="person-pop">
		<div class="pop-body">
			<img :src="popContent.imgUrl" alt="" />
			<p v-html="popContent.content"></p>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['popContent']
	}
</script>

<style scoped>
	.person-pop {
		position: fixed;
		width: 342px;
		height: 218px;
		z-index: 11;
		top: 50%;
		left: 50%;
		margin-left: -171px;
		margin-top: -109px;
	}
	.pop-body {
		text-align: center;
		background: rgba(0,0,0,0.65);
		box-shadow: 0 8px 20px 0 rgba(0,0,0,0.39);
		border-radius: 5px;
		padding-bottom:36px;
	}
	.pop-body img {
		margin-top: 25px;
		width: 62px;
		height: 62px;
	}
	.pop-body p {
		margin-top: 36px;
		font-size: 22px;
		color: #FFFFFF;
		letter-spacing: 0.82px;
		line-height: 36px;
	}
</style>